<template>
  <div>
    <!-- 眼压 -->
    <el-divider :id="`region_${props.regionId}`">
      {{ props.title }}
    </el-divider>
    <table class="region_data">
      <thead>
        <tr>
          <th class="set_bg">
            {{ props.title }}
          </th>
          <th class="title_bg">CCT</th>
          <th class="title_bg">眼压值均值</th>
          <th class="title_bg">CCT修正后的眼压值均值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>OD</th>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_rightCct`)">
            <el-input
              v-model="data_form.rightCct"
              placeholder="请输入右眼CCT"
              :data-field="`${props.regionId}_rightCct`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_rightCct`"
            />
            <span v-else>
              <span v-if="data_form.rightCct">
                {{ data_form.rightCct }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_rightIOPAvg`)">
            <el-input
              v-model="data_form.rightIOPAvg"
              placeholder="请输入右眼眼压值均值"
              :data-field="`${props.regionId}_rightIOPAvg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_rightIOPAvg`"
            />
            <span v-else>
              <span v-if="data_form.rightIOPAvg">
                {{ data_form.rightIOPAvg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_rightIOPccAvg`)">
            <el-input
              v-model="data_form.rightIOPccAvg"
              placeholder="请输入右眼CCT修正后的眼压值均值"
              :data-field="`${props.regionId}_rightIOPccAvg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_rightIOPccAvg`"
            />
            <span v-else>
              <span v-if="data_form.rightIOPccAvg">
                {{ data_form.rightIOPccAvg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <th>OS</th>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_leftCct`)">
            <el-input
              v-model="data_form.leftCct"
              placeholder="请输入左眼CCT"
              :data-field="`${props.regionId}_leftCct`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_leftCct`"
            />
            <span v-else>
              <span v-if="data_form.leftCct">
                {{ data_form.leftCct }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_leftIOPAvg`)">
            <el-input
              v-model="data_form.leftIOPAvg"
              placeholder="请输入左眼眼压值均值"
              :data-field="`${props.regionId}_leftIOPAvg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_leftIOPAvg`"
            />
            <span v-else>
              <span v-if="data_form.leftIOPAvg">
                {{ data_form.leftIOPAvg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_leftIOPccAvg`)">
            <el-input
              v-model="data_form.leftIOPccAvg"
              placeholder="请输入左眼CCT修正后的眼压值均值"
              :data-field="`${props.regionId}_leftIOPccAvg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_leftIOPccAvg`"
            />
            <span v-else>
              <span v-if="data_form.leftIOPccAvg">
                {{ data_form.leftIOPccAvg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";

onMounted(() => {
  //   console.log(props);
});

const emit = defineEmits(["handleDbClickFocus", "handleDbClickBlur"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  regionId: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: String,
    default: "",
  },
  dbClickPlaceholder: {
    type: String,
    default: "",
  },
});
const data_form = ref({}); // 数据

// 双击聚焦
const handleDbClickFocus = (ElementName) => {
  emit("handleDbClickFocus", ElementName);
  nextTick(() => {
    // 添加nextTick确保DOM更新后执行
    document.querySelector(`input[data-field="${ElementName}"]`)?.focus();
  });
};

// 失去焦点
const handleDbClickBlur = () => {
  emit("handleDbClickBlur", {
    regionId: props.regionId,
    data: data_form.value,
  });
};

let cleanup;
onMounted(() => {
  cleanup = watchStorage("refresh_region_data", (e) => {
    data_form.value = e.data.iop_data;
  });

  // 组件卸载时清理监听
  return () => cleanup();
});

onBeforeUnmount(() => {
  cleanup();
});
</script>

<style scoped lang="scss">
.title_bg {
  @apply w-[28.3%];
}
</style>